<template>
  <div>
    <n-bar></n-bar>
    <div class="tabss">
      <van-tabs v-model="active">
        <van-tab
          v-for="item in tabs"
          :key="item.id"
          :title="item.title"
        ></van-tab>
      </van-tabs>
      <!-- 商品详情 -->
      <div class="infoo">
        <div>
          <img :src="info.img" alt="" />
        </div>
        <div>商品价格：{{ info.market_price }}</div>
        <div>商品的名称：{{ info.goodsname }}</div>
        <div>
          商品描述：
          <div id="desc" v-html="info.description"></div>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" @click='details' text="加入购物车" />
      <van-goods-action-button type="danger" @click='anddetail' text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getGoodsinfo,Cartadd} from "../request/app";
export default {
  data() {
    return {
      active: 0,
      tabs: [
        {
          id: 1,
          title: "商品",
        },
        {
          id: 2,
          title: "评价",
        },
        {
          id: 3,
          title: "详情",
        },
        {
          id: 4,
          title: "推荐",
        },
      ],
      info: {},
    };
  },
  mounted() {
    getGoodsinfo({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res, "获取一个商品详情");
      if (res.code == 200) {
        this.info= res.list[0];
      }
    });
  },
  methods: {
    // 封装一个加入购物车事件
    details(){
      //  this.$router.push('/cart')
      // 我们可以在这里进行一个判断
      //如果已经登录带着条件带着加入的接口跳转
      //如果没登录就跳转登录页
      if(sessionStorage.getItem('userinfo')){
          // 调用添加购物车接口
          // console.log(sessionStorage.getItem('userinfo') );
            // this.$router.push('/cart')
            Cartadd({
              // 转对象
              uid:JSON.parse(sessionStorage.getItem('userinfo')).uid,
              goodsid:this.info.id,
              num:1
            })
            .then((res)=>{
              console.log(res,"111");
              this.$router.push('/cart') 
            })
            
      }else{

        this.$router.push('/login')
      }
    },
    // 封装一个购买事件
    anddetail(id){
      // 直接跳转订单页
      this.$router.push('/order')
    }
  },
};
</script>

<style scoped>
#desc >>> img {
  width: 100%;
}
.tabss{
  overflow :auto
}

.van-goods-action{
  width: 3.8rem;
}
</style>
